<template>
	<view class="content">
		<view class="bigBox">
			<view class="tipBox">
				<text>Hi，请绑定Piece动画账号！</text>
				<text class="tip2">未注册用户将自动注册</text>
			</view>
			<view class="inputBox">
				<text>手机号</text>
				<input type="number" v-model="phoneNumber" />
				<text>验证码</text>
				<view class="code">
					<input type="text" v-model="code" placeholder="请输入验证码">
					<text @click.stop="getCode()"
						:class="getCodeBtnDisabled ? 'waitTime getText' : 'getText'">{{ codeBtnWord }}</text>
				</view>

			</view>
			<view class="bindBtn">
				<checkbox-group @change="checkPrivacy">
					<label>
						<checkbox value="true" :checked="checkPrivacyFlag" />
						<text class="checkPrivacy" style="margin-left: 10px;">我已阅读并同意</text><text @click="openWebView"
							class="checkPrivacy"
							style="margin: 0;padding: 0;text-decoration: underline;">《用户隐私协议》</text>
					</label>
				</checkbox-group>

				<button @click="login" style="margin-top: 10px;">登录</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		setInfo,
		parseUserData
	} from '../../hook/auth.js'
	import api from '../../api/api.js'
	export default {
		data() {
			return {
				phoneNumber: '', //手机号
				code: '', //验证码
				checkPrivacyFlag: false,
				userData: '', //用户信息
				getCodeBtnDisabled: false, //发送验证码开关
				countCode: 60, //验证码倒计时
				codeBtnWord: "获取验证码", //验证码提示
			}
		},
		methods: {
			getCode() {
				const self = this
				if (self.codeBtnWord != "重新获取验证码" && self.codeBtnWord != "获取验证码") {
					return
				}
				if (!self.phoneNumber || self.phoneNumber.length != 11) {
					uni.showToast({
						title: "请输入手机号"
					})
					return false
				}
				try {
					self.codeBtnWord = "获取中..."
					api.getCode({
							spec: {
								phone: self.phoneNumber,
							}
						}).then((res) => {
							if (res.code === 200) {
								uni.showToast({
									"title": "验证码发送成功"
								})
								//发送验证码后60s倒计时及按钮禁用
								self.getCodeBtnDisabled = true
								let countDown = setInterval(() => {
									if (self.countCode > 1) {
										self.countCode--
										self.codeBtnWord = `${self.countCode}s后重新发送`
									} else {
										clearInterval(countDown)
										self.codeBtnWord = "重新获取验证码"
										self.getCodeBtnDisabled = false
										self.countCode = 60
									}
								}, 1000)
							} else {
								uni.showToast({
									title: "获取失败，请重试",
									icon: "error"
								})
							}
						})
						.catch((err) => {
							throw err
						})
				} catch (e) {
					console.error(e)
				}
			},
			//点击确认登录，根据手机号和验证码进行登录
			login() {
				const self = this
				if (!this.checkPrivacyFlag) {
					uni.showToast({
						title: "同意用户隐私协议后才能登录",
						icon: "none"
					})
					return
				} else {
					api.login({
							spec: {
								phone: self.phoneNumber,
								login_code: self.code,
							},
							channel: "douyinApplet"
						}).then((res) => {
							console.log(res)
							if (res.code==200) {
								uni.showToast({
									title:"登录成功"
								})
								setInfo(res.data)
								uni.reLaunch({
									url: '/pages/index/index'
								});
							} else {
								uni.showToast({
									title:res.msg,
									icon:"none"
								})
							}
						})
						.catch((err) => {
							throw err
						})
				}
			},
			//查看隐私政策
			openWebView(e) {
				uni.navigateTo({
					url: '/pages/components/webview?url=https://www.pencil-stub.com/html/applet/privacy_agreement.html'
				})

			},
			//同意隐私政策
			checkPrivacy() {
				this.checkPrivacyFlag = !this.checkPrivacyFlag
			},
		},

		mounted() {
			this.userData = parseUserData()
		}
	}
</script>

<style scoped>
	.code .waitTime {
		color: rgba(166, 166, 166, 1);
	}

	.code .getText {
		cursor: pointer;
		position: absolute;
		right: 40px;
		top: calc(50%);
		transform: translateY(-50%);
		font-size: 18px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		z-index: 999;
	}

	.code {
		position: relative;
	}

	.tipBox1 text {
		display: block;
	}

	.tipBox1 {
		width: 90%;
		height: 100px;
		padding-top: 50px;
		border-radius: 5px;
		background: rgba(56, 56, 56, 1);
		text-align: center;
		margin: 0 auto;
		line-height: 20px;
		margin-top: 100px;
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
	}

	.register {
		text-decoration: underline;
		color: rgba(166, 166, 166, 1);
	}

	.switchBox {
		margin-top: 30px;
		text-align: right;
		font-size: 12px;
		color: rgba(166, 166, 166, 1);
	}

	.bindBtn button {
		width: 100%;
		height: 56px;
		border-radius: 32px;
		background: rgba(18, 205, 217, 1);
		line-height: 56px;
		font-size: 16px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.bindBtn {
		margin-top: 20px;
	}

	.inputBox input {
		width: 100%;
		height: 55px;
		padding: 0 16px;
		box-sizing: border-box;
		background: transparent;
		border: 1px solid rgba(18, 205, 217, 1);
		border-radius: 25px;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.12px;
		color: rgba(255, 255, 255, 1);

	}

	.inputBox text,
	.checkPrivacy {
		font-size: 12px;
		font-weight: 500;
		margin-left: 16px;
		color: rgba(235, 235, 239, 1);
	}

	.inputBox {
		margin-top: 40px;
	}

	.tipBox .tip2 {
		display: block;
		margin-top: 8px;
		font-size: 12px;
		color: rgba(166, 166, 166, 1);
	}

	.tipBox text {
		font-size: 16px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.tipBox {
		width: 100%;
		margin-top: 60px;
	}

	.bigBox {
		margin: 0 auto;
		width: calc(100% - 50px);
	}

	.content {
		width: 100%;
		height: 100vh;
		background: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}
</style>